<template>
  <div class="functionalAuthority">
    <div class="tips">
      <Row justify='space-between' align="middle">
        <Col span="20">
        <Row class="company">人员调出子公司：{{outCompany||'-'}}</Row>
        <Row class="company">人员可调入子公司：{{inCompany||'-'}}</Row>
        </Col>
        <Col flex="0 1 100px">
        <Button type="success" @click="save" :disabled='saveFlag'>保存</Button>
        </Col>
      </Row>
    </div>
    <div class="treeMenu" ref="TableHeight" :style="{ height: onresizeHeight + 'px' }">
      <Row>
        <Col :xs="2" :sm="4" :md="6" :lg="8" class="treeMenuLeft">
        <div class="tit">人员调出子公司</div>
        <Tree :data="data1" @on-select-change="treeSelChange"></Tree>
        </Col>
        <Col :xs="2" :sm="4" :md="6" :lg="8">
        <div class="tit">人员可调入子公司</div>
        <Tree :data="data2" show-checkbox check-strictly check-directly
          @on-check-change="pcSelChange"></Tree>
        </Col>
      </Row>
    </div>
    <dt-loading :loading="loading" />
  </div>
</template>

<script>
  import organizationManagementMgr from '@/biz/organizationManagement/organizationManagement'
  export default {
    name: 'functionalAuthority',
    data() {
      return {
        data1: [],
        data2: [],
        outCompany: '',
        outCompanyId: '',
        inCompany: '',
        inCompanyId: [],
        onresizeHeight: '',
        loading: false,
        saveFlag: true,
        deepList: []
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight =
              window.innerHeight - this.$refs.TableHeight.offsetTop - 100
          }, 10)
        })()
      }
    },
    methods: {
      renderContent() {
        return (h, {
          data
        }) => {
          return h('span', {
            style: {
              display: 'inline-block',
              backgroundColor: data.disabled ? '#f7f7f7' : '',
              color: data.disabled ? '#c5c8ce' : '',
              lineHeight: '1.5'
            },
          }, data.title)
        }
      },
      save() {
        this.$Modal.confirm({
          title: '是否确认保存？',
          onOk: () => {
            let params = {
              webInCompanyId: this.inCompanyId,
              outCompanyId: this.outCompanyId
            }
            organizationManagementMgr.teamCompanyScopeSaveOrUpdate(params).then(res => {
              this.$Message.success('保存成功')
            })
          }
        })
      },
      pcSelChange(val) {
        let checklist = [],
          inCompanyId = []
        if (val.length != 0) {
          val.forEach((item) => {
            checklist.push(item.title)
            inCompanyId.push(item.id)
            this.inCompany = checklist.join(',')
            this.inCompanyId = inCompanyId
          })
        } else {
          this.inCompany = ''
          this.inCompanyId = []
        }
      },
      treeSelChange(val) {
        this.inCompany = ''
        this.inCompanyId = []
        this.saveFlag = true
        if (val.length != 0) {
          this.loading = true
          this.outCompany = val[0].title
          this.outCompanyId = val[0].id
          this.saveFlag = false
          this.getScopeCompanyByCompanyId(val[0].id)
        } else {
          this.outCompany = ''
          this.outCompanyId = []
          this.data2 = this.$tool.deepClone(this.deepList)
        }
      },
      getScopeCompanyByCompanyId(data) {
        organizationManagementMgr.getScopeCompanyByCompanyId({ companyId: data }).then(res => {
          this.invertData(this.deepList, res && res.webInCompanyId ? res.webInCompanyId :
          [])
        })
      },
      //反显可调入子公司
      invertData(oldList, checkList) {
        let tmpList = this.$tool.deepClone(oldList)
        let tmpcheckList = []
        checkList.forEach(itemL => {
          tmpList[0].children.forEach(item => {
            item.children.forEach(element => {
              if (itemL == element.id) {
                element.checked = true
                tmpcheckList.push(element)
              }
            })
          })
        })
        this.loading = false
        this.data2 = tmpList
        this.pcSelChange(tmpcheckList)
      },
      // 业务架构
      getBusinessList() {
        this.loading = true
        return organizationManagementMgr.getOrg().then((res) => {
          this.loading = false
          this.recursion(res)
          this.deepList = this.$tool.deepClone(res)
          this.data1 = this.$tool.deepClone(res)
          this.data2 = this.$tool.deepClone(res)
          return res
        })
      },
      recursion(data) {
        data.forEach((item) => {
          item.expand = 'true'
          item.title = item.orgName
          item.render = this.renderContent()
          if (item.level == '2') item.children = []
          if (item.children && item.children.length) {
            this.recursion(item.children)
            item.disabled = true
          }
        })
      },
    },
    created() {
      this.$nextTick(function() {
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.offsetTop - 100
      })
      this.getBusinessList()
    },
  }
</script>
<style lang='scss' scoped>
  .functionalAuthority {
    padding: 20px;
    position: relative;

    .tips {
      background-color: #fefcec;
      padding: 10px;
      margin-bottom: 20px;

      .company {
        padding: 5px 0;
        color: #333;
        font-weight: bold;
      }
    }

    ::v-deep .ivu-row {
      height: 100%;
      overflow: hidden;

      .ivu-col {
        overflow-y: auto;
        height: 100%;
      }
    }

    .tit {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      padding-left: 15px;
    }
  }
</style>